<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="obj.name = 'rose' ">修改obj.name</button>
        <button @click="obj.age = 20 ">修改obj.age</button>
        <button @click="obj.pet.nickname = '小强' ">修改obj.pet.nickname</button>
        <button @click=" obj = { name: 'andy', age: 26 } ">修改obj指向</button>
        <p>{{ obj }}</p>
    </div>

    <script src="./vue.js"></script>
    <script>
        new Vue ({
            el: '#app',
            data() {
                return {
                    obj: {
                        name: 'jack',
                        age: 16,
                        pet: {
                            nickname: '旺财',
                            age: 1
                        }
                    }
                }
            },
            watch: {
                // // 默认情况下侦听不到对象属性的变化
                // // 默认情况本质上只能侦听栈上的变化
                // // 记：默认侦听只能侦听基本数据改变，对象的属性改变不会被侦听到，除非把这个对象指向给换了才能侦听到
                // obj () {
                //     console.log('obj改变了')
                // },
            
                // // 如果就是想侦听属性改变
                // "obj.name" () {
                //     console.log('name改变了')
                // },
                // "obj.age" () {
                //     console.log('age改变了')
                // },

                // 不管obj哪个属性发生改变都能侦听到
                // 深度侦听 -- 也叫侦听器的完整写法
                obj: {
                    // 开启深度侦听
                    deep: true,
                    // 当值变化调用的回调函数
                    handler (newVal, oldVal) {
                        // 此时依然有参数，只不过参数没有任何意义
                        // 因为你侦听的是obj，那么打印的也是obj的值
                        // obj的值就是地址，而指向的地址都是一样的
                        console.log('obj内容被改变', newVal, oldVal)
                    },
                    // 是否需要初始化执行---也就是页面一打开就执行一次
                    immediate: true
                }

            }
        })
    </script>
</body>
</html>